<script setup>
import {
    Edit,
    Delete,
    Plus,
    Search,
    Refresh,
    View,
    Check,
    Close
} from '@element-plus/icons-vue'
import { ref } from 'vue'

// 数据模型
const dataList = ref([])
const pageNum = ref(1)
const total = ref(0)
const pageSize = ref(10)
const searchForm = ref({})
const searchName = ref('')

// 分页方法
const onSizeChange = (size) => {
    pageSize.value = size
    getDataList()
}
const onCurrentChange = (num) => {
    pageNum.value = num
    getDataList()
}

// 抽屉控制
const visibleDrawer = ref(false)
const dataModel = ref({})
const title = ref('')

// 查询数据列表
const getDataList = async () => {
    // 这里调用API获取数据
    // 示例代码
    dataList.value = []
    total.value = 0
}

// 添加数据
const addData = async () => {
    // 这里调用API添加数据
    visibleDrawer.value = false
    getDataList()
}

// 清空表单
const clearForm = () => {
    dataModel.value = {}
}

// 编辑数据
const editData = (row) => {
    dataModel.value = JSON.parse(JSON.stringify(row))
    title.value = '编辑数据'
    visibleDrawer.value = true
}

// 更新数据
const updateData = async () => {
    // 这里调用API更新数据
    visibleDrawer.value = false
    getDataList()
}

// 删除数据
const deleteData = async (id) => {
    // 这里调用API删除数据
    getDataList()
}

// 查看详情
const viewVisible = ref(false)
const viewTitle = ref('')
const viewContent = ref('')
const showInfo = (row) => {
    viewVisible.value = true
    viewTitle.value = row.name || '详情'
    viewContent.value = row.description || ''
}
</script>

<template>
    <div class="page-container">
        <el-card class="box-card">
            <template #header>
                <div class="card-header">
                    <span class="title">模块标题</span>
                    <div class="header-actions">
                        <el-button type="primary" @click="visibleDrawer = true, title = '添加数据', clearForm()" class="add-button">
                            <el-icon><Plus /></el-icon>添加数据
                        </el-button>
                        <el-button type="danger" @click="batchDelete" class="delete-button">
                            <el-icon><Delete /></el-icon>批量删除
                        </el-button>
                    </div>
                </div>
            </template>
            
            <!-- 搜索区域 -->
            <div class="search-area">
                <el-form :inline="true" :model="searchForm" class="demo-form-inline">
                    <el-form-item label="名称">
                        <el-input 
                            v-model="searchName" 
                            placeholder="请输入名称" 
                            clearable 
                            prefix-icon="Search"
                            class="custom-input"
                        />
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="getDataList" class="search-button">
                            <el-icon><Search /></el-icon>搜索
                        </el-button>
                        <el-button @click="searchName = '', getDataList" class="reset-button">
                            <el-icon><Refresh /></el-icon>重置
                        </el-button>
                    </el-form-item>
                </el-form>
            </div>

            <!-- 数据列表 -->
            <el-table 
                :data="dataList" 
                style="width: 100%" 
                border 
                stripe
                @selection-change="handleSelectionChange"
                :header-cell-style="{ background: '#f5f7fa', color: '#606266', fontWeight: 'bold' }"
                :row-style="{ height: '60px' }"
                :cell-style="{ padding: '8px 0' }"
                highlight-current-row>
                <el-table-column type="selection" width="55" align="center" />
                <el-table-column label="名称" prop="name" min-width="180" align="center" show-overflow-tooltip />
                <el-table-column label="描述" min-width="180" align="center">
                    <template #default="{ row }">
                        <el-button type="primary" size="small" @click="showInfo(row)" class="view-button">
                            <el-icon><View /></el-icon>查看详情
                        </el-button>
                    </template>
                </el-table-column>
                <el-table-column label="更新时间" prop="updateTime" min-width="180" align="center" show-overflow-tooltip />
                <el-table-column label="操作" min-width="120" align="center" fixed="right">
                    <template #default="{ row }">
                        <div class="operation-buttons">
                            <el-tooltip content="编辑" placement="top">
                                <el-button :icon="Edit" circle type="primary" @click="editData(row)" size="small" />
                            </el-tooltip>
                            <el-tooltip content="删除" placement="top">
                                <el-button :icon="Delete" circle type="danger" @click="deleteData(row.id)" size="small" />
                            </el-tooltip>
                        </div>
                    </template>
                </el-table-column>
                <template #empty>
                    <el-empty description="暂无数据" />
                </template>
            </el-table>

            <!-- 分页 -->
            <div class="pagination-container">
                <el-pagination
                    v-model:current-page="pageNum"
                    v-model:page-size="pageSize"
                    :page-sizes="[10, 20, 50, 100]"
                    :total="total"
                    layout="total, sizes, prev, pager, next, jumper"
                    background
                    @size-change="onSizeChange"
                    @current-change="onCurrentChange"
                />
            </div>
        </el-card>

        <!-- 抽屉 -->
        <el-drawer 
            v-model="visibleDrawer" 
            :title="title" 
            direction="rtl" 
            size="50%"
            :before-close="() => visibleDrawer = false"
            destroy-on-close
            :show-close="false"
            class="custom-drawer">
            <template #header>
                <div class="drawer-header">
                    <div class="drawer-title">
                        <el-icon class="title-icon"><component :is="title === '添加数据' ? Plus : Edit" /></el-icon>
                        <span>{{ title }}</span>
                    </div>
                    <el-button class="close-button" @click="visibleDrawer = false" circle>
                        <el-icon><Close /></el-icon>
                    </el-button>
                </div>
            </template>
            <div class="drawer-content">
                <el-form :model="dataModel" label-width="100px" class="drawer-form">
                    <el-form-item label="名称">
                        <el-input 
                            v-model="dataModel.name" 
                            placeholder="请输入名称" 
                            class="custom-input"
                            prefix-icon="User"
                        />
                    </el-form-item>
                    <el-form-item label="描述">
                        <el-input 
                            v-model="dataModel.description" 
                            type="textarea"
                            :rows="4"
                            placeholder="请输入描述" 
                            class="custom-input"
                        />
                    </el-form-item>
                    <el-form-item class="drawer-footer">
                        <el-button type="primary" @click="title === '添加数据' ? addData() : updateData()" class="submit-button">
                            <el-icon><Check /></el-icon>提交
                        </el-button>
                        <el-button @click="visibleDrawer = false" class="cancel-button">
                            <el-icon><Close /></el-icon>取消
                        </el-button>
                    </el-form-item>
                </el-form>
            </div>
        </el-drawer>

        <!-- 详情弹框 -->
        <el-dialog 
            v-model="viewVisible" 
            width="60%" 
            destroy-on-close
            class="custom-dialog"
            :show-close="false">
            <template #header>
                <div class="dialog-header">
                    <div class="dialog-title">
                        <el-icon class="title-icon"><View /></el-icon>
                        <span>{{ viewTitle }}</span>
                    </div>
                    <el-button class="close-button" @click="viewVisible = false" circle>
                        <el-icon><Close /></el-icon>
                    </el-button>
                </div>
            </template>
            <div class="dialog-content-wrapper">
                <div class="dialog-content" v-html="viewContent"></div>
            </div>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="viewVisible = false" class="close-dialog-button">
                        <el-icon><Close /></el-icon>关闭
                    </el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</template>

<style lang="scss" scoped>
/* 这里不需要添加任何样式，因为所有样式都在common.scss中定义 */
</style> 